<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>修改dom</title>
</head>
<body>
    <nav>
        <ul>
            <li><a href="#">导航-1</a></li>
            <li><a href="#">导航-2</a></li>
            <li><a href="#">导航-3</a></li>
            <li><a href="#">导航-4</a></li>
            <li><a href="#">导航-5</a></li>
            <li><a href="#">导航-6</a></li>
        </ul>
    </nav>
    <div id="d1" class="parent">
        <p>
            <h1>message</h1>
            <ol>
                <li><a href="#">div-1</a></li>
                <li><a href="#">div-2</a></li>
                <li><a href="#">div-3</a></li>
                <li><a href="#">div-4</a></li>
                <li><a href="#">div-5</a></li>
            </ol>
        </p>
    </div>
    <!-- 通常建议进入js，作为body的最后一个子元素 -->
    <script>
        //$合法的函数名（自定义）
        let $=function(id){
            return document.getElementById(id);
        }
        let div=$('d1');
        //获得div的内容
        let contentHTML=div.innerHTML;
        console.log(contentHTML);
        let contentTxt=div.innerText;
        console.log(contentTxt);
        //将div中的内容修改为 h3{新的内容}
        div.innerHTML=`<h3>新的内容</h3>`;
        //将div中内容清空
        div.innerHTML='';
        

    </script>
</body>
</html>